<template lang="pug">
el-dialog(:title="zhuantiid==-1?'添加':'编辑'" :visible.sync="open" :before-close="close" append-to-body)
    goodslist(@getgoodsid="getgooditem")
    el-form(:v-model="f" label-position="right" label-width="80px" class="height")
        el-form-item.is-required(label="专题名称" prop="name")
            el-input(v-model="f.name" auto-complete="off")
        el-form-item(label="封面图片")
            el-upload(drag action="http://up-z0.qiniu.com" :data="uploadData"
            :file-list="fileDetailUploadList" :on-success="handleDetailUploadSuccess"
            :on-remove="handleDetailRemove" :on-error="handleUploadError" :before-upload="handleBeforUpload"
            list-type="picture-card")
                .el-upload__text 将文件拖到此处，或
                    em 点击上传
                .el-upload__tip(slot="tip") 只能上传jpg/png文件，且不超过500kb
        el-form-item(label="排序")
            el-input(v-model="f.spec" auto-complete="off")
        el-form-item(label="选择店铺")
            el-select(v-model="shop" placeholder="选择相应店铺" :disabled="shopidlist")
                el-option(label="全部" value="0" v-if="shirott")
                el-option(v-for="item in opts" :key="item.shopId" :label="item.shopName" :value="item.shopId")
        el-form-item(label="是否启用")
            el-radio-group(v-model="showStatus")
                el-radio-button(:label="0") 不启用
                el-radio-button(:label="1") 启用
        el-form-item(label="跳转类别")
            el-radio-group(v-model="type")
                el-radio-button(:label="1") 专题详情
                el-radio-button(:label="2") 商品详情
        el-form-item.is-required(label="关联商品" v-if="type==2")
            el-input(v-model="g" readonly type="number" style="width:50%")
            el-button(@click="chagegoods") 选择商品
        el-form-item(label="专题详情" v-if="type==1")
            AddGoods(:specialGoodsList="specialGoodsList" @specialGoodsList-change="specialGoodsListChange")
    .dialog-footer(slot="footer")
        el-button(@click="close") 取消
        el-button(type="primary" @click="save") 确定
</template>
<script>
import AddGoods from '../SetWxConfig/AddGoods'
import goodslist from 'components/goodslist'
import qs from 'qs'
    export default{
        props:['Position'],
        data(){
            return{
                open:false,
                linktype:0,
                f:{},
                showStatus:'0',
                uploadData: {
                    key: '',
                    token: ''
                },
                shop:'0',
                fileDetailUploadList:[],
                gkopt:[],
                specialGoodsList:[],
                zhuantiid:-1,
                opts:[],
                shirott:this.$store.state.shiro,
                shopidlist:false,
                type:'1',
                g:0,
            }
        },
        components:{
            AddGoods,
            goodslist
        },
        computed:{
            getstate(){
                return this.$store.state.projectclass;
            },
            getchange(){
                return this.$store.state.project;
            }
        },
        watch:{
            getstate(v){
                this.open=v
                this.getshop()
            },
            getchange(v){
                if(v.topicPageId){
                    this.zhuantiid=v.topicPageId
                    var p=new URLSearchParams()
                    p.append('xcxTopicPageId',v.topicPageId)
                    this.gdt(p)
                }
            }
        },
        methods:{
            specialGoodsListChange(list) {//获取组件的数据
                this.specialGoodsList = list
            },
            getshop(){//获取店铺信息
                if(this.$store.state.shiro){
                    this.opts=[].concat(this.$store.state.TOPshop)
                }else{
                    if(this.$store.state.TOPshopID!=''&&this.$store.state.TOPshopName!=''){
                        var shop={}
                        for(var i=0;i<this.$store.state.TOPshop.length;i++){
                            if(this.$store.state.TOPshop[i].shopId==this.$store.state.TOPshopID){
                                shop=this.$store.state.TOPshop[i]
                                this.opts.push(shop)
                                this.shop=this.$store.state.TOPshopID
                            }
                        }
                        this.shopidlist=true
                        this.shirott=false
                    }
                }
            },
            gdt(v){//获取专题详情,然后填写form
                var _this=this
                axios.get('/getXcxTopicPage.do',{params:v}).then(r=>{
                    // console.log("获取专题详情",r)
                    if(r.data.code==200){
                        var m=r.data.response.topicPage
                        _this.f.name=m.name
                        _this.fileDetailUploadList.push({
                            name: '',
                            url: m.image
                        })
                        if(m.shopId==0){
                            _this.shop='0'
                        }else{
                            _this.shop=m.shopId
                        }
                        _this.f.spec=m.sort
                        _this.showStatus=m.showStatus
                        _this.type=m.type
                        _this.g=m.xcxGoodId
                        _this.specialGoodsList=JSON.parse(m.detail)
                    }else{
                    }
                })
            },
            close(){//关闭,并清空数据
                this.fileDetailUploadList=[]
                this.specialGoodsList=[]
                this.zhuantiid=-1
                this.opts=[]
                this.f={}
                this.g=''
                this.shop='0'
                this.$store.state.projectclass=false
                this.$store.state.project={}
            },
            getgooditem(m){//获取商品id
                this.g=''
                this.g=m
            },
            qiniuyunup(_vm, file, rule) {//七牛云上传验证
                const isJPG = file.type === 'image/jpeg'
                const isPNG = file.type === 'image/png'
                const isFitSize = rule.maxSize ? file.size / 1024 / 1024 < rule.maxSize : 'undefined';
                if (rule.isJPG || rule.isPNG) {
                    if (!isJPG && !isPNG) {
                        _vm.$message.error('图片只能是 JPG/PNG 格式!');
                        return false
                    }
                }
                if (isFitSize != 'undefined' && !isFitSize) {
                    _vm.$message.error('大小不能超过 ' + rule.maxSize + 'MB!');
                    return false
                }
            },
            handleDetailUploadSuccess(response, file, fileList) {
                var newFile = {
                    name: file.name,
                    url: window.qiniuHost + response.key
                }
                this.fileDetailUploadList = []
                this.fileDetailUploadList.push(newFile)
            },
            handleDetailRemove(){//清空上传的图片
                this.fileDetailUploadList = []
            },
            handleUploadError(error, file, fileList) {
                const _this = this
                _this.$message.error('上传失败')
            },
            handleBeforUpload(file) {
                // console.log("file",file)
                const _this = this
                let rule = {
                    isJPG: true,
                    isPNG: true,
                    maxSize: 2
                }
                var suffix = file.name.split('.')
                this.uploadData.key = new Date().getTime() + '.' + suffix[1]
                this.uploadData.token = this.$store.state.qiniuToken
                return this.qiniuyunup(_this, file, rule)
            },
            chagegoods(){//打开商品弹窗
                this.$store.commit('ChangeWxGood')
            },
            save(){//保存
                var _this=this
                var pa=new URLSearchParams()
                pa.append('name',this.f.name)
                if(this.fileDetailUploadList.length==0){
                    this.$message.error('请上传图片')
                    return
                }
                pa.append('image',this.fileDetailUploadList[0].url)
                pa.append('position',this.Position)
                // console.log("showStatus",this.showStatus)
                pa.append('showStatus',this.showStatus)

                pa.append('sort',this.f.spec)

                pa.append("type",this.type)
                if(this.type==1){
                    if(this.specialGoodsList.length==0){
                        this.$message.error("请添加详情内容")
                        return
                    }
                    pa.append('detail',JSON.stringify(this.specialGoodsList))
                }
                if(this.type==2){
                    if(!this.g){
                        this.$message.error("请添加关联商品")
                        return
                    }
                    pa.append('xcxGoodId',this.g)
                }
                if(!this.shop){
                    this.$message.error("请选择店铺")
                    return
                }
                pa.append('shopId',this.shop)

                if(this.zhuantiid==-1){//新增
                    axios.get('/saveXcxTopicPage.do',{params:pa}).then(r=>{
                        // console.log("新增专题",r)
                        if(r.data.code==200){
                            _this.$message.success("新增成功")
                            _this.$store.state.projectnew=false
                            _this.close()
                        }else{
                            _this.$message.error(r.data.message)
                        }
                    })
                }else{//修改
                    pa.append('xcxTopicPageId',this.zhuantiid)
                    axios.get('/updateXcxTopicPage.do',{params:pa}).then(r=>{
                        // console.log("修改专题",r)
                        if(r.data.code==200){
                            _this.$message.success("修改成功")
                            _this.$store.state.projectnew=false
                            _this.close()
                        }else{
                            _this.$message.error(r.data.message)
                        }
                    })
                }
            }
        }
    }
</script>
<style>
.el-upload-dragger{
    height: 160px !important;
}
.height{
    height: 400px;
    overflow: auto;
}
</style>
